<template>
    <div class="header">
        <div class="header-w">
            <div class="logo">
                <img src="../../assets/images/logo_black.png" alt="" />
            </div>
            <div class="header-nav">
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    :router="true"
                >
                    <el-menu-item index="/home/index">首页</el-menu-item>
                    <el-menu-item index="/home/rankinglist"
                        >排行榜</el-menu-item
                    >
                    <el-menu-item index="/home/songlist">歌单</el-menu-item>
                    <el-menu-item index="/home/singerlist">歌手</el-menu-item>
                    <el-menu-item index="/home/mvlist">MV</el-menu-item>
                </el-menu>
            </div>

            <searchModel ref="searchModel" />
            <headUserInfo />
        </div>
    </div>
</template>

<script>
import searchModel from "../../components/searchInput/searchModel";
import headUserInfo from "../../components/userInfoOrLogin/HeadUserInfo";
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("home");

export default {
    components: {
        searchModel,
        headUserInfo,
    },
    mounted() {},
    data() {
        return {};
    },
    computed: {
        ...mapState(["activeIndex", "isSearch"]),
    },
    methods: {
        ...mapMutations(["changeActiveIndex"]),
        handleSelect(key, keyPath) {
            this.changeActiveIndex(key);
        },
        openSearchModel() {},
        //头部搜索栏事件
    },
};
</script>

<style lang='scss' scoped>
.header {
    height: 100px;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #f2f2f2;
    line-height: 100px;
    position: fixed;
    top: 0;
    z-index: 99;
    .header-w {
        width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-nav {
            ul {
                border-bottom: none;
                li {
                    margin-right: 25px;
                }
            }
        }
    }
}
</style>